<!DOCTYPE html>
<!--
Copyright 2012 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Author: Eric Bidelman (ericbidelman@chromium.org)
-->
<html>
<head>
  <title>Getting Started with the Google Maps API</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <script src='slides.js'></script>
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|Droid+Sans+Mono&amp;v2">
  <link href='http://fonts.googleapis.com/css?family=Nosifer+Caps' rel='stylesheet' type='text/css'>
  <style> pre .com {word-wrap: break-word;} </style>
</head>
<body style='display: none'>

<section class='slides layout-regular'>

  <article id="title">
    <div style="background: url(http://maps.googleapis.com/maps/api/staticmap?center=Google,mountain%20View,%20ca&amp;zoom=10&amp;size=900x900&amp;sensor=false&amp;scale=2) center center; background-size: 100%; height: 200px; position: absolute; top:-200px; left:0px; width: 100%; opacity:0.6"></div>
    <div>
      <p>Kathryn Hurley &amp; Andrés Ferraté</p>
      <p>Google Maps Developer Relations</p>
        <time pubdate datetime="YYYY-MM-DD">April 2, 2012</time>
      </p>
      <h1>Getting Started with the<br/>Google Maps API</h1>
    </div>
  </article>
  
  <article>
    <h1 class='centered-slide-title'>More than just a map</h1>
  </article>
  
  <article>
    <h1>
      The Google Maps Family of APIs
    </h1>
    <div>
      <p><img id="place-1" class='centered' style='height: 500px; position: absolute' src='images/geo-family-apis.png' /></p>
      <p  class="build"><img id="place-2" class='centered' style='height: 500px; position: absolute' src='images/geo-family-apis-subset.png' /></p>
    </div>
  </article>
  
  <article> 
    <h1> 
      Agenda
    </h1>
    <div>
      <ul>
        <li>Introduction - 5 mins</li>
        <li>Code lab - 60 mins</li>
        <li>Next steps - 5 mins</li>
        <li>Q &amp A - 5 mins</li>
      </ul>
    </div>
  </article>
  
  <article> 
    <h1> 
      What You Should Have
    </h1>
    <div>
      <ul>
        <li>Laptop</li>
        <li>Modern browser (w/ Dev Tools)</li>
        <li>HTML, CSS, and JS knowledge</li>
        <li>A spirit of adventure!</li>
      </ul>
    </div>
  </article>
  
  <article >
      <h1>
        HTML, CSS, and JS
        (<a href='helloworld.html' target='_blank'>Demo</a>)
      </h1>
      <pre>
        
    <code>&lt;html&gt;
      &lt;head&gt;
        &lt;title&gt;A cool map app!&lt;/title&gt;
        &lt;link href=&quot;<strong>helloworld.css</strong>&quot;
        rel=&quot;stylesheet&quot;
        type=&quot;text/css&quot;&gt;
      &lt;/head&gt;
      &lt;body onLoad="initialize()"&gt;
        &lt;div id=&quot;<strong>map_canvas</strong>&quot;&gt;&lt;/div&gt;
        &lt;script src=&quot;<strong>http://maps.googleapis.com/
        maps/api/js?sensor=false</strong>&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;<strong>helloworld.js</strong>&quot;&gt;&lt;/script&gt;
      &lt;/body&gt;
    &lt;/html&gt;</code>
      </pre>
  </article>
  
  <article >
    <h2>
      Some inspiration...
    </h2>
  </article>
  
  <article class='fill'>
  	<iframe src='http://www.gta4.net/map/' scrolling='no'></iframe> 
  </article>

  <article class='fill'> 
  	<iframe src='http://gmaps-samples-v3.googlecode.com/svn/trunk/talks/io2011/map-usability/styled.html'></iframe> 
  </article>
  
  <article class='fill'>
  	<iframe src='http://www.flushtracker.com/' scrolling='no'></iframe> 
  </article>

  <article>
    <h1>Code Tutor</h1>
    <h1 class='centered-slide-title'>
      <a href='http://goo.gl/mSwxi'>
        <span style='color: #666'>
          goo.gl</span>/<span style='color: #d94a38'>mSwxi</span>
      </a>
    </h1>
  </article>
  
  <article>
    <h2>Next steps...</h2>
  </article>
  
  <article>
    <h1>Developer Documentation</h1>
    <h1 class='centered-slide-title'>
      <a href='http://goo.gl/d3yY2'>
        <span style='color: #666'>
          goo.gl</span>/<span style='color: #d94a38'>d3yY2</span>
      </a>
    </h1>
    <h2>
      A new home at developers.google.com
    </h2>
  </article>
  
  <article>
    <h1>Maps Showcase</h1>
    <h1 class='centered-slide-title'>
      <a href='https://developers.google.com/showcase?utm_source=welovemapsdevelopers&utm_campaign=mdr-where2012'>
        <span style='color: #666'>
          developers.google.com</span>/<span style='color: #d94a38'>showcase</span>
      </a>
    </h1>
    <h2>
      Find some additional inspiration!
    </h2>
  </article>
  
  <article>
    <h1>Google Maps API+</h1>
    <h1 class='centered-slide-title'>
      <a href='http://goo.gl/S1QWZ'>
        <span style='color: #666'>
          goo.gl</span>/<span style='color: #d94a38'>S1QWZ</span>
      </a>
    </h1>
    <h2>
      Find us on Google+
    </h2>
  </article>
  
  <article>
    <h1>Get help from the community</h1>
    <h1 class='centered-slide-title'>
      <a href='http://stackoverflow.com'>
        <span style='color: #d94a38'>stackoverflow.com</span>
      </a>
    </h1>
    <h2>
      Stack Overflow
    </h2>
  </article>
  
  <article>
    <h1 class='centered-slide-title'>
      Thank You!
    </h1>
    <div style='float: left; width: 40%'>
    <h1>
      Kathryn<br/>
      <a href='http://goo.gl/B3LYq'>
        <span style='color: #666'>
          goo.gl</span>/<span style='color: #d94a38'>B3LYq</span>
        </a>
    </h1>
    </div>
    <div style='float: right; width: 40%'>
    <h1>
      Andres<br/>
      <a href='http://goo.gl/ZoYMi'>
        <span style='color: #666'>
          goo.gl</span>/<span style='color: #d94a38'>ZoYMi</span>
      </a>
    </h1>
    <div>
  </article>

<!--[if IE]>
<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<script>CFInstall.check({mode: 'overlay'});</script>
<![endif]-->

</body>
</html>
